<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ref } from 'vue';
const router=useRouter()

let usermessage: any = {};
try {
  usermessage = JSON.parse(localStorage.getItem('usermessage') || '{}');
} catch (error) {
  console.error('Error parsing usermessage from localStorage:', error);
}
let show = ref(false);
const img = usermessage.img || '';
const male = ref(usermessage.male || '');
const tel = ref(usermessage.tel || '');
const location = ref(usermessage.location || '');
const value = ref([{ url: img }]);
const work = ref(usermessage.work || '');


function backClick(){
    router.go(-1)
}
function submitClick(){
    

    usermessage.img = value.value[0].content;
  usermessage.male = male.value;
  usermessage.tel = tel.value;
  usermessage.location = location.value;
  usermessage.work = work.value;
 
    localStorage.setItem('usermessage', JSON.stringify(usermessage));
 
 console.log(usermessage);

    
}
</script>
<template>

    <main class="box">
        <header class="header">
      <slot  name="left">
      <div class="back">
        <van-icon color="#d6d6d6" size="20" @click="backClick" name="arrow-left" />
        <span @click="backClick">返回</span>
      </div>
 
      </slot>
      <span>个人资料</span>
      <slot name="right"></slot>
  </header>
    <div class="content"> 
        <van-form >
  <van-cell-group inset>
    <van-field name="uploader" >
  <template #input>
    <van-uploader v-model="value" reupload max-count="1"  type="file" >
        <van-button  icon="plus" type="primary">修改头像</van-button>
  
    </van-uploader>
  </template>
</van-field>
<van-field
      v-model="male"
     type="text"
      name="性别"
      label="性别"
      placeholder="请写性别"
    />
  
    <van-field
      v-model="location"
     type="text"
      name="籍贯"
      label="籍贯"

    />
    <van-field
      v-model="tel"
     type="text"
      name="电话号码"
      label="电话号码"

    />
    <van-field
      v-model="work"
     type="text"
      name="工作"
      label="工作"

    />
    
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button @click="submitClick" round block type="primary" native-type="submit">
      提交
    </van-button>
  </div>
</van-form>
    </div>
    </main>
</template>

<style lang="scss" scoped>
.header{
    color: black;
    background-color: white;
   .back{
    position: absolute;
    left: 0;
    top: 0;
    span{
        color: blue;
    }
   }
}
.content{
    width: 100%;
    height: 100%;
    background-color: #f4f6f9;

}
</style>
    